<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,
            initial-scale=1.0,user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>页面</title>
        <link rel="stylesheet" href="./static/css/weui.min.css">
        <link rel="stylesheet" href="./static/css/jx.css">
    </head>
    <body>
        <div class="page button js_show">
            <div class="">
                <div class="weui-grids">
                    <span  class="weui-grid" style="padding: 5px" id="keshi">
                        <p class="weui-grid__label"><span>科室</span><i class="icon icon-ad"></i></p>
                    </span>
                    <span  class="weui-grid" style="padding: 5px" id="zhicheng">
                        <p class="weui-grid__label"><span>职称</span><i class="icon icon-ad"></i></p>
                    </span>
                    <span  class="weui-grid" style="padding: 5px" id="riqi">
                        <p class="weui-grid__label"><span>日期</span><i class="icon icon-ad"></i></p>
                    </span>
                </div>
                <div class="weui-panel weui-panel_access" style="margin-top: 0">
                    <!--<div class="weui-panel__hd">科室名称</div>-->
                    <div class="weui-panel__bd">
                        <div class="weui-cell">
                            <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                                    <img  style="width: 50px;height: 50px;"class="weui-media-box__thumb" src="" alt="">
                            </div>
                            <div class="weui-cell__bd">
                                <p>名称 <span style="color: #888888;font-size:13px;">职称</span></p>
                                <p style="font-size: 13px;color: #888888;">一些信息</p>
                            </div>
                            <div class="weui-cell__ft">
                                <a href="./doctorInfo.html" class="weui-btn weui-btn_primary weui-btn_mini">立即预约</a>
                                <span class="weui-badge" style="position: absolute;top: .4em;right: .4em;">8/20</span>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                                <img  style="width: 50px;height: 50px;"class="weui-media-box__thumb" src="" alt="">
                            </div>
                            <div class="weui-cell__bd">
                                <p>名称 <span style="color: #888888;font-size:13px;">职称</span></p>
                                <p style="font-size: 13px;color: #888888;">一些信息</p>
                            </div>
                            <div class="weui-cell__ft">
                                <a href="./doctorInfo.html" class="weui-btn weui-btn_primary weui-btn_mini">立即挂号</a>
                                <span class="weui-badge" style="position: absolute;top: .4em;right: .4em;">8/20</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="page__ft page__bd_spacing">
            </div>
        </div>
    </body>
    <script type="text/javascript" src="./static/js/weui.min.js"></script>
    <script type="text/javascript" src="./static/js/zepto.min.js"></script>
    <script type="text/javascript">
        var now = new Date();
        var form = {
            keshi:null,
            zhicheng:null,
            riqi:{
                year: null,
                month:null,
                day:null,
            },
        };

        var search = function() {
            weui.alert(JSON.stringify(form));
        }

        $(function(){
            $("#keshi").on("click", function(){
                var vm = this;
                weui.picker([
                    {label: '科室1', value: 0},
                    {label: '科室2', value: 1},
                    {label: '科室3', value: 3},
                    {label: '科室4', value: 4,}
                ], {
                    className: '',
                    container: 'body',
                    defaultValue: [form.keshi],// 默认选中
                    onConfirm: function (result) {
                        form.keshi = result[0].value;
                        $(vm).find("span").html(result[0].label);
                        search();
                    },
                    id: 'keshi-select'
                });
            });

            $("#zhicheng").on("click", function(){
                var vm = this;
                weui.picker([
                    {label: '职称1', value: 0},
                    {label: '职称2', value: 1},
                    {label: '职称3', value: 3},
                    {label: '职称4', value: 4,}
                ], {
                    className: '',
                    container: 'body',
                    defaultValue: [form.zhicheng],// 默认选中
                    onConfirm: function (result) {
                        form.zhicheng = result[0].value;
                        $(vm).find("span").html(result[0].label);
                        search();
                    },
                    id: 'zhicheng-select'
                });
            });

            $("#riqi").on("click", function(){
                var vm = this;
                weui.datePicker({
                    start: new Date(), // 从今天开始
                    end: new Date((new Date()).getTime()+7*24*3600000),
                    defaultValue: [form.riqi.year || now.getFullYear(), form.riqi.month || now.getMonth()+1, form.riqi.day || now.getDate()],
                    onConfirm: function(result){
                        form.riqi = result[0].value+'-'+result[1].value+'-'+result[2].value;
                        $(vm).find("span").html(result[0].label+result[1].label+result[2].label);
                        search();
                    },
                    id: 'riqi-select'
                });
            });
        });
    </script>
</html>
